<template>
    <view class="background">

      <van-sticky>
      <view class="demo-nav" style>
        <router-link :to="'/DecorationProcess'" class="demo-nav__back">

        </router-link>
      </view>

      </van-sticky>

      <view>
        
		<swiper indicator-dots circular autoplay>
			<swiper-item v-for="(image, index) in images" :key="index">
				<image :src="image.conUrl" mode="" style="width: 100%;" ></image>
			</swiper-item>
		</swiper>
      </view>
      <!--<view v-for="item in indexfindList">-->
      <view>

        <view class="commodity-details-a">
          <van-row>
            <van-col span="18" style="text-align: left">
              <view style="font-weight: bolder;margin-bottom: 0.5rem">{{detaList.constructionName}}</view>
              <view style="display: inline-block">￥<text style="font-size: 1.5rem;font-weight: bolder">{{detaList.price}}</text></view>
              <view style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">销量:<text>455</text></view>
              <view style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">成交次数:<text>561</text></view>
            </van-col>
            <van-col span="6" style="text-align: right">
              <van-icon name="share-o" size="22"/>
              <!--<view>分享</view>-->
              <van-button @click="fenxiang">aa</van-button>
            </van-col>
          </van-row>
        </view>

        <view class="commodity-details-b">
          <view class="shop_home-b">
            <van-row>
              <van-col span="18" style="text-align: left">
                <van-tag plain type="primary" color="red">店铺优惠券</van-tag>
              </van-col>
              <van-col span="6" style="text-align: right;padding-right: 0.5rem;position: relative">
                <view style="color:red;font-size: 0.9rem;display: inline-block" @click="showCoupon = true">领券<van-icon name="arrow" size="13" color="red"/></view>
              </van-col>
            </van-row>
          </view>
        </view>

        <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> </van-divider>
        <view>
          <van-row type="flex" >
            <van-col span="5"><image width="2rem" height="2rem" src="https://i.52112.com/icon/jpg/256/20200505/76859/3243626.jpg" style="height: 60px; width: 60px;margin-right: 20px;"/>  </van-col>
            <van-col span="19">
              <van-row>
                <van-col span="19">商家已交诚信金{{detaList.balanceMoney}}元</van-col>
              </van-row>
              <van-row>
                <van-col span="19">承诺所承担的业务范围属实</van-col>
              </van-row>
            </van-col>
          </van-row>
        </view>

        <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> </van-divider>
        <van-cell is-link @click="showPopup">
          <van-grid>
            <view>店铺地址: {{detaList.address}}</view>
            <view class="you_mi" align="right">1.8km</view>
            <view> <view>营业时间: 24小时</view></view>
          </van-grid>
        </van-cell>

        <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0px' }"> </van-divider>
        <!--<view>-->
          <!--<van-grid column-num="5" :border="false">-->
            <!--<van-grid-item icon="friends" text="特色服务" @click="teseButton(detaList.constructionId)"></van-grid-item>-->
            <!--<van-grid-item icon="column" text="资质荣誉"></van-grid-item>-->
            <!--<van-grid-item icon="thumb-circle" text="施工擅长" />-->
            <!--<van-grid-item icon="comment" text="案例展示" />-->
            <!--<van-grid-item icon="volume" text="服务区域" />-->
          <!--</van-grid>-->
        <!--</view>-->
        　
        <van-grid :border="false" :column-num="5">
          <van-grid-item @click="teseButton(detaList.constructionId)">
            <image src="https://img.yzcdn.cn/vant/apple-1.jpg" style="width: 50px; height: 60px;" />
            <view style="font-size: 0.8rem"><b>特色服务</b></view>
          </van-grid-item>
          <van-grid-item @click="handleScroll('one')" >
            <image src="https://img.yzcdn.cn/vant/apple-2.jpg" style="width: 50px; height: 60px;"/>
            <view style="font-size: 0.8rem"><b>资质荣誉</b></view>
          </van-grid-item>
          <van-grid-item>
            <image src="https://img.yzcdn.cn/vant/apple-3.jpg" style="width: 50px; height: 60px;"/>
            <view style="font-size: 0.8rem"><b>施工擅长</b></view>
          </van-grid-item>
          <van-grid-item @click="handleScroll('two')" >
            <image src="https://img.yzcdn.cn/vant/apple-2.jpg" style="width: 50px; height: 60px;"/>
            <view style="font-size: 0.8rem"><b>案例展示</b></view>
          </van-grid-item>
          <van-grid-item>
            <image src="https://img.yzcdn.cn/vant/apple-3.jpg" style="width: 50px; height: 60px;"/>
            <view style="font-size: 0.8rem"><b>服务区域</b></view>
          </van-grid-item>
        </van-grid>

        <van-cell is-link @click="show = true"><text style="font-size: 1.3rem">已选</text> 选择 规格</van-cell>
<view style="padding: 0rem 1rem 0rem 1rem">


        <view align="left">
          <van-row>
            <van-col span="24"><b><text style="font-size: 1.3rem">服务</text></b></van-col>
          </van-row>
          <van-row>
            <van-col span="10"><text>队伍/公司名称</text></van-col>
            <van-col span="7">{{detaList.supplierName}}</van-col>
            <van-col span="7"></van-col>
            <van-col span="8"></van-col>
          </van-row>
          <hr/>
          <van-row>
            <van-col span="10">队伍人数</van-col>
            <van-col span="7">{{detaList.temaNumber}}</van-col>
            <van-col span="7"></van-col>
            <van-col span="8"></van-col>
          </van-row>
          <hr/>
          <van-row>
            <van-col span="10">手机号</van-col>
            <van-col span="7">{{detaList.phoneNumber}}</van-col>
            <van-col span="7"></van-col>
            <van-col span="8"></van-col>
          </van-row>
          <hr/>
        <van-row>
          <van-col span="24"><text>业务分类：</text></van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <b>
              <text style="font-size: 0.8rem">业务分类业务分类业务分类业务分类业务分类业</text>
            </b>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24"><text>业务范围：</text></van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <b>
              <text style="font-size: 0.8rem">业务范围业务范围业务范围业务范围</text>
            </b>
          </van-col>
        </van-row>
      </view>
</view>
        <van-row id="two">
          <van-col span="24">
            <van-cell is-link @click="anliButton(index.constructionId)">
            <!--<van-cell is-link :to="'/DecorateACase'">-->
              <!--<b>施工案例</b> （12） <span align="left">查看全部</span> -->
              <van-row >
                <van-col span="6"><b>施工案例</b></van-col>
                <van-col span="3">(12)</van-col>
                <van-col span="3"></van-col>
                <van-col span="6"></van-col>
                <van-col span="6" :click="quanbu">
                  查看全部
                </van-col>
              </van-row>
            </van-cell>
          </van-col>
        </van-row>

        <view >
          <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
          <van-grid :column-num="2" :square="true" :border="false" >
            <van-grid-item @click="toConstruction(index.caseId,index.constructionId)">
              <image
                width="10rem"
                height="9rem"
                :src="index.casePicurl"
              />
            </van-grid-item>
            <van-grid-item  @click="toConstruction(index.caseId,index.constructionId)" align="left">
              <view>
                <view style="font-size: 0.9rem">户型面积: {{index.doorArea}}㎡</view>
                <view style="font-size: 0.9rem">装修报价: {{index.decoratePrice}}万</view>
                <view style="font-size: 0.9rem">装修风格: {{index.decorStyle}} </view>
                <view style="font-size: 0.9rem">设计师: {{index.stylist}}</view>
              </view>
            </van-grid-item>
          </van-grid>
        </view>

<!--<view style="padding: 0rem 0.5rem 0rem 0.5rem">-->


        <view id="one" style="padding-bottom: 10%" align="left">
          <van-row>
            <van-col span="1"></van-col>
            <van-col span="23"><b>资质荣誉</b></van-col>
          </van-row>

          <van-row>
            <van-col span="1"></van-col>
            <van-col span="23">营业执照</van-col>
            <view class="image-view">
              <van-swipe @change="onChange1"  class="my-swipe" :autoplay="3000" indicator-color="white" >
                <van-swipe-item v-for="item in RongOne" >
                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
                </van-swipe-item>
                <template #indicator>
                  <view class="custom-indicator">{{ current1 + 1 }}/{{RongOne.length}}</view>
                </template>
              </van-swipe>
            </view>
          </van-row>

          <van-row>
            <van-col span="1"></van-col>
            <van-col span="23">施工资质</van-col>
            <view class="image-view">
              <van-swipe @change="onChange2"  class="my-swipe" :autoplay="3000" indicator-color="white" >
                <van-swipe-item v-for="item in RongTwo" >
                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
                </van-swipe-item>
                <template #indicator>
                  <view class="custom-indicator">{{ current2 + 1 }}/{{RongTwo.length}}</view>
                </template>
              </van-swipe>
            </view>
            <!--<van-col span="24">-->
              <!--<van-swipe :loop="false" :width="250">-->
                <!--<van-swipe-item v-for="item in RongTwo">-->
                  <!--<van-image-->
                    <!--width="12rem"-->
                    <!--height="11rem"-->
                    <!--fit="contain"-->
                    <!--style="display: inline-block;padding: 0 5px"-->
                    <!--:src="item.conUrl"-->
                  <!--/>-->
                <!--</van-swipe-item>-->
              <!--</van-swipe>-->
              <!--&lt;!&ndash;<person-scrollsg></person-scrollsg>&ndash;&gt;-->
            <!--</van-col>-->
          </van-row>

          <van-row>
            <van-col span="1"></van-col>
            <van-col span="23">荣誉证书</van-col>
            <view class="image-view">
              <van-swipe @change="onChange3"  class="my-swipe" :autoplay="3000" indicator-color="white" >
                <van-swipe-item v-for="item in RongThree" >
                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
                </van-swipe-item>
                <template #indicator>
                  <view class="custom-indicator">{{ current3 + 1 }}/{{RongThree.length}}</view>
                </template>
              </van-swipe>
            </view>
            <!--<van-col span="24">-->
              <!--<van-swipe :loop="false" :width="250">-->
                <!--<van-swipe-item v-for="item in RongThree">-->
                  <!--<van-image-->
                    <!--width="12rem"-->
                    <!--height="11rem"-->
                    <!--fit="contain"-->
                    <!--style="display: inline-block;padding: 0 5px"-->
                    <!--:src="item.conUrl"-->
                  <!--/>-->
                <!--</van-swipe-item>-->
              <!--</van-swipe>-->
              <!--&lt;!&ndash;<person-scrollzs></person-scrollzs>&ndash;&gt;-->
            <!--</van-col>-->
          </van-row>
        </view>
<!--</view>-->

        <van-popup v-model="showCoupon" round position="bottom" closeable :style="{ height: '70%' }">
          <view class="container">
            <h1 style="color: red;font-size: 18px">优惠卷</h1>
            <view class="coupon-list">
              <view class="sawtooth-bor item" v-for="coupon in 2">
                <view class="pt10 discount" style="padding-top: 10px;">
                  <view class="fs12">awdawd</view>
                  <view class="fs12">满100减2</view>
                  <view class="fs12">有效期2020-9-9 - 2020-10-9</view>
                </view>
                <view class="textc receive">立即领取</view>
              </view>
            </view>
          </view>
        </van-popup>

    </view>

      <van-goods-action>
        <van-goods-action-icon style="width: 8rem" icon="phone-circle-o" text="电话咨询" @click="onClickIcon" />
        <!--<van-goods-action-icon />-->
         <van-goods-action-button type="danger" text="立即购买" @click="purchase" />
      </van-goods-action>

        <!--<van-goods-action>-->
          <!--<van-goods-action-button icon="phone-circle-o" text="电话服务" />-->
          <!---->
        <!--</van-goods-action>-->
        <van-sku
          align="left"
          v-model="show"
          :sku="sku"
          :goods="goods_info"
          :goods-id="goods_id"
          :hide-stock="sku.hide_stock"
          :quota="quota"
          :quota-used="quota_used"
          :show-add-cart-btn="false"
          reset-stepper-on-hide
          reset-selected-sku-on-hide
          :initial-sku="initialSku"
          disable-stepper-input
          :close-on-click-overlay="closeOnClickOverlay"
          :custom-sku-validator="customSkuValidator"
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"/>
    </view>
</template>

<script>
  // import { selectProductById,selectProductLableByProId } from '@/api/commodity/shop_product.js'
  import { findAllList } from "@/api/constructionTeam/conlabel";
  import { findAllListCase, findAllCaseById, getCaseId, getId } from "@/api/constructionTeam/caseinfo";
  import { findAllListBuilding, findAllById, findAllListDetails, getDetailsId,selectCpiUrl } from "@/api/constructionTeam/building";
  import { instalmentadd } from "@/api/customer/instalment";
  import { Toast } from 'vant';
  import { findAllRongIdOne,findAllRongIdTwo,findAllRongIdThree,findAllRongIdTwoen } from "@/api/commodity/qualifipic";
  import { Swipe, SwipeItem } from 'vant';
  import wx from 'weixin-js-sdk';
  import axios from 'axios'
  import { getSignature,getAccessTokenAndJsapi } from "@/api/fenxiang";
  import  PersonScrollsg from "./personScrollsg.vue"
  import  PersonScrollzs from "./personScrollzs.vue"
  import  PersonScrollzz from "./personScrollzz.vue"


  export default {
        name: "ShopDetails",
      components: {
        PersonScrollsg,
      PersonScrollzs,
  PersonScrollzz
        },
      data(){
          return{

            pricenum:'',
            instalmentIdnum:'',
            form:{
              numpice:'',
              numconstructionId:'',
              numinstalmentState:'',
            },
            show: false,
            caseId:'',
            // indexfindList:[],
            typeOptions:[],
            defaultDictType:"",
            queryparams: {
              pageNum: 1,
              pageSize: 10
            },
            careparams: {
              pageNum: 1,
              pageSize: 10
            },
            goods_id: '',
            closeOnClickOverlay: true,  //点击空白处关闭购物框
            showShare: false,
            quota: 1, //限购数量 库存旁边显示限购数
            quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
            goods_info: {
              title: '',
              picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
            },
            sku: {
              // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
              // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
              tree: [
                {
                  k: '规格',
                  k_s: 's1',
                  v: [],
                },
              ],
              // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
              list: [],
              price: '',  //？？
              stock_num: null, // 商品总库存？？
              none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
              hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
            },
            initialSku:{
              // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
              // 值：skuValueId（规格值 id）
              s1: '1',
              // 初始选中数量
              selectedNum: 1,
            },
            // 查看店铺优惠券
            showCoupon: false,

            detaList: Array,
            index: Array,

            images: [
              // 'https://img.yzcdn.cn/vant/apple-1.jpg',
              // 'https://img.yzcdn.cn/vant/apple-2.jpg',
            ],

            nav_list: [
              //导航数据
              {
                title: "特色服务",
                icon: "photo-fail",
                path: "Introduction",

              },
              {
                title: "资质荣誉",
                icon: "photo-fail",
                path: "my_index",
              },
              {
                title: "施工擅长",
                icon: "photo-fail",
                path: "my_index",
              },
              {
                title: "案例展示",
                icon: "photo-fail",
                path: "my_index",
              },
              {
                title: "服务区域",
                icon: "photo-fail",
                path: "inspection_index",
              }
              ],
            constructionId:Number,
            construction: Object,
            labelQuantity:1,
            RongOne:[],
            RongTwo:[],
            RongThree:[],
            queryRong:{
              constructionIdsnum:'',
            },
            //轮播当前页
            current1: 0,
            current2: 0,
            current3: 0,
          }
      },
		onLoad(openid) {
      	const constructionId = openid.constructionId;
      	this.getId(constructionId);
      	this.getDetailsId(constructionId);
      	this.constructionId = constructionId;
      	this.getSelectCpiUrl(constructionId);
      	
      	
      	const supplierId =parseInt(openid.supplierId);
      	this.findRongIdOne(supplierId);
      	this.findRongIdTwo(supplierId);
      	this.findRongIdThree(supplierId);
      },
      created() {
          // const constructionId = this.$route.query && this.$route.query.constructionId;
          // this.getId(constructionId);
          // this.getDetailsId(constructionId);
          // this.constructionId = constructionId;
          // this.getSelectCpiUrl(constructionId);


          // const supplierId =parseInt(this.$route.query && this.$route.query.supplierId);
          // this.findRongIdOne(supplierId);
          // this.findRongIdTwo(supplierId);
          // this.findRongIdThree(supplierId);
          // this.findRongIdTwo(supplierId);
      },


      methods: {



        fenxiang(){

          // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=https://www.weixin.qq.com/wxpay/pay.php&response_type=code&scope=snsapi_base&state=123#wechat_redirect`


          //获取随机串
          var createNonceStr = Math.random().toString(36).substr(2, 15)
          // timestamp
          var createTimeStamp = parseInt(new Date().getTime() / 1000)


          getSignature(createTimeStamp,createNonceStr).then(res=>{

            // if (res.code === 200) {
            console.log("4444444444444")
            //微信初始化
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: "wx775ca6325a3255ef", // 必填，公众号的唯一标识
              timestamp: res.timestamp , // 必填，生成签名的时间戳
              nonceStr: res.nonce_str, // 必填，生成签名的随机串
              signature: res.signature,// 必填，签名，见附录1
              jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            console.log("33333333333333333")

          var openid=$("#openid").html();

          wx.ready(function(){
            var sdata = {
              imgUrl: "http://tiaojie.gongyitiaojie.com/userImg/def.png", // 分享图标
              link: "",//"http://yst3qg.natappfree.cc/bootdo/wx/weixinAutoLogin?userId="+openid,  location.href
              title: "微信测试分享朋友圈Demo", // 分享标题
              desc: "分享描述", // 分享描述
              success: function () {
                console.log("2222222222222222")
                alert("分享成功");
              },
              trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
                alert("点击了分享按钮");
                window.location.href = "http://wlw1996.ngrok.xiaomiqiu.cn/doLogin";
              },
              cancel: function () {
                alert("分享失败");
              }

            };
            console.log("11111111111111111111")
            wx.onMenuShareAppMessage(sdata);// 发送给朋友
            wx.onMenuShareTimeline(sdata);//分享到朋友圈
          });

          // }else{
          //   wx.error(function(res){
          //     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          //     alert("抱歉，服务器初始化错误。");
          //   });
          // }
          });




          // let url = process.env.baseShortUrl+'/ins_wc/wechat/getLogo';
          // let param = location.href.split('#')[0];   //当前的链接
          // let params = {
          //   url: param
          // };
          // let _that = this;
          // this.$http.get(url, {params: params}).then(res => {
          //
          //   let Data = res.data.split(",");   //把字符串转为数组
          // //微信分享配置
          // wx.config({
          //   debug: false,　                  //调试，如果分享出错可以设置true
          //   appId: process.env.appId,
          //   timestamp: Data[0],
          //   nonceStr: Data[1],
          //   signature: Data[2],
          //   jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
          // });
          //
          //
          //   wx.ready(function(){
          //   let shareData = {
          //     title: "货车驾乘无忧意外险",
          //     desc: "你的一小笔开支，是我们关系的一大步，为我付款吧",
          //     link: process.env.indexUrl + "?user="+_that.parameter, //分享的链接 必须跟安全域名的保持一致，不然分享无效
          //     imgUrl: process.env.driverSmall + '/images/insurance-pic-file/driverAccident.png',
          //     success: function(){
          //
          //     }
          //   };
          //   })
          //
          // wx.onMenuShareAppMessage(shareData);   //微信好友
          // wx.onMenuShareTimeline(shareData);     //朋友圈
          //
          // });


        },



        onClickIcon(){

          let url = encodeURIComponent(location.href.split('#')[0]);
          console.log("*****url****"+url)
          // 自定义config
          getAccessTokenAndJsapi(url).then((response)=>{

            var res = response.data;
          console.log(res)
          wx.config({
            debug: true, // 开启调试模式
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature,// 必填，签名
            jsApiList: [
              "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
              "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
              "onMenuShareWeibo",//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
            ] // 必填，需要使用的JS接口列表
          })
        }).catch((error)=>{
            console.log(error)
        });


          wx.ready(() => {
            wx.updateAppMessageShareData({
            title: '微信自定义分享朋友', // 分享标题
            desc: '微信自定义分享朋友', // 分享描述
            link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://sjbz.fd.zol-img.com.cn/t_s240x320c/g5/M00/00/03/ChMkJ1fJVzuIYa52AAabqdbC5xQAAU-CgPnq3YABpvB522.jpg',
            success: (res=>{
              console.log(res);
            })
        });
        });


          wx.updateTimelineShareData({
            title: '微信自定义分享到朋友圈', // 分享标题
            desc: '微信自定义分享到朋友圈', // 分享描述
            link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:'http://sjbz.fd.zol-img.com.cn/t_s240x320c/g5/M00/00/03/ChMkJ1fJVzuIYa52AAabqdbC5xQAAU-CgPnq3YABpvB522.jpg',
            // imgUrl: require('./logo.jpg'), // 分享图标(不能赋相对路径，一定要是绝对路径)
            success: (res) => {
            console.log(res);
        }
        });

          wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log(res);
          });



          // Toast("手机号:"+JSON.stringify(this.detaList.phoneNumber));
          // console.log("this.detaList.phoneNumber++"+JSON.stringify(this.detaList.phoneNumber))
        },




        handleScroll(id) {
          var element = document.getElementById(id);
          element.scrollIntoView();
        },


        findRongIdOne(supplierId){
          findAllRongIdOne(supplierId).then(res=>{
            this.RongOne = res.data;
          })
        },

        findRongIdTwo(supplierId){
          findAllRongIdTwoen(supplierId).then(res=>{
            this.RongTwo = res.data;
        })
        },
        findRongIdThree(supplierId){
          findAllRongIdThree(supplierId).then(res=>{
            this.RongThree = res.data;
        })
        },


        purchase(){
          this.show = true;
          findAllList(this.constructionId).then((res) =>{
            for (let i = 0; i < res.data.data.length; i++){
            this.sku.tree[0].v.push({ "id": null,"name":null,"imgUrl":null});
            this.sku.tree[0].v[i].id = res.data.data[i].labelId;
            this.sku.tree[0].v[i].name = res.data.data[i].labelName;
            this.sku.tree[0].v[i].imgUrl = res.data.data[i].conUrl;
            this.sku.list.push({ "id": null,"price":null,"discount":null,"s1":null,"goods_id":null,"stock_num":null});
            this.sku.list[i].s1 = res.data.data[i].labelId;
            this.sku.list[i].stock_num = this.labelQuantity;
            this.sku.list[i].goods_id = res.data.data[i].constructionId;
            this.sku.list[i].price = (res.data.data[i].labelPrice)*100;
            this.goods_id = res.data.data[i].constructionId;
            this.sku.stock_num += this.labelQuantity;
          }
        })
        },

        onBuyClicked(sku) {

          // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
          // TODO: 这里暂时有问题
           this.form.numpice =(this.sku.list[0].price)/100
           this.form.numconstructionId = this.$route.query && this.$route.query.constructionId
           this.form.numinstalmentState = Math.floor(Math.random()*100000000000);
          console.log("***this.form.numpice***"+this.form.numinstalmentState)

          instalmentadd(this.form).then(res=>{
            console.log("*****this.form******"+JSON.stringify(this.form))
            this.$router.push({
            path:"/PaymentDetails",
            query:{
              // skuId: sku.selectedSkuComb.s1,
              constructionId:this.$route.query && this.$route.query.constructionId,
              selectedNum:sku.selectedNum,
              pricenum:(this.sku.list[0].price)/100,
              numinstalmentState:this.form.numinstalmentState
            }
          });
          })


        },
        onAddCartClicked(sku) {
          this.$toast('add cart:' + JSON.stringify(sku));
        },


        teseButton(constructionId){
          this.$router.push({
            path:"/Introduction",
            query:{constructionId: constructionId}}
          );
        },

        toBack(){
          this.$router.go(-1);//返回上一层
        },

        anliButton(constructionId){
          this.$router.push({
            path:"/DecorateACase",
            query:{constructionId: constructionId}}
            );
        },

        // TODO: 施工案例查询
        getId(constructionId){
          getId(constructionId).then(res=>{
            this.index = res.data.data;
            console.log(res);
          })
        },

        getDetailsId(constructionId){
          getDetailsId(constructionId).then(res=>{
            this.detaList = res.data.data;
          })
        },

        customSkuValidator(){
          console.log("************888888")
        },
        quanbu(){
          console.log("************888888")
        },

        onChange(index) {
          this.showList = false;
          this.chosenCoupon = index;
        },
        onExchange(code) {
          this.coupons.push(coupon);
        },
        showPopup(){

        },

        onEdit() {
          Toast('编辑');
        },
        //施工队图片的轮播
        getSelectCpiUrl(constructionId){
          selectCpiUrl(constructionId).then((res)=>{
            this.images = res.data.data;
          })
        },
        //施工案例详情
        toConstruction(caseId){
          this.$router.push({path:"/CaseDetails",query:{constructionId: this.constructionId,caseId: caseId}});
        },
        //轮播点击
        onChange1(index) {
          this.current1 = index;
        },
        onChange2(index) {
          this.current2 = index;
        },
        onChange3(index) {
          this.current3 = index;
        },

      }

    }
</script>

<style scoped>
  .commodity-details-a{
    padding: 0.5rem 1rem;
  }
  .commodity-details-a p{
    font-size: 0.8rem;
  }
  .commodity-details-b{
    padding: 0 1rem;
  }
.sku-container{
  display:none;
}
  .s-ctn {
    float: left;
    border: 1px solid red;
  }
  .img_tu{
    width: 100%;
    height: 10rem;
  }
  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 350;
    font-size: 1.2rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .shopdet{
    padding: 0.6rem;
  }
  .content {
    padding: 16px 16px 260px;
  }


  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 18px;
  }

  .coupon-list {
    width: 370px;
    margin: 0 auto;
  }

  .coupon-list .item:first-child {
    margin-top: 20px;
  }

  .coupon-list .item {
    width: 370px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  /* 第一个 */
  .sawtooth-bor {
    display: flex;
    color: #fff;
    padding-left: 0.5rem;
    box-sizing: border-box;
    /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
    background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
    /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
    background-size: 30px 28px;
    /* 根据优惠券view大小进行微调 */
    background-position: 16px 0px;
    background-color: #fff;
    position: relative;
  }

  .sawtooth-bor:before {
    content: ' ';
    display: block;
    /* 用相同的颜色覆盖 */
    background-color: #F35C3B;
    /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 为锯齿保留的距离 */
    left: 20px;
    right: 20px;
    z-index: -1;
  }
  .discount {
    border-right: 2px dashed #f5f5f5;
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
    background-color: #F35C3B;
  }
  .receive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffb937;
  }

  .image-view{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 2%;
    width: 95%;
    height: 30%;
    display: inline-block;
  }
  .custom-indicator {
    height: auto;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 30%;
    line-height: 30%;
    text-align: center;
  }

</style>
